<template>
	<div class="background">
		<h1>WELCOME</h1>
		<form class="login">
			<div class="connent">
				<div class="username" >
					<input class="input" type="text" name="username" v-model="username" placeholder="工号">
				</div>
				<div class="password">
					<input class="input" type="password" name="password" v-model="password" placeholder="密码" @blur="testPassword">
				</div>
				<input type="button" name="button" class="button" @click.stop.prevent="loginFormat" value="提 交"/>
			</div>
		</form>
	</div>
</template>
<script>
import LHeader from '@/components/header/Header'
import axios from 'axios'
import { baseUrl } from '@/assets/js/var.js'
export default {
	name: 'Login',
	data (){
		return{
			headerText: '智慧食堂清洗端',
			username: '',
			password: '',
			formatPW:'',
			showBack:false
		}
	},
	components: {
		LHeader
	},
	methods : {
		//数据加密
		loginFormat (){
			axios.get(`${baseUrl}/api/v1.1/washCleanerMember/rsaKey`)
				.then(response =>{
					if (response.data.code === 7001000) {
						let pwdKey = new RSAUtils.getKeyPair(response.data.data.exponent,"",response.data.data.modulus);
						let reversedPwd = this.password.split("").reverse().join("");
						let encrypedPwd = RSAUtils.encryptedString(pwdKey,reversedPwd);
						this.formatPW = encrypedPwd
						this.login()
					}else if (response.data.code === 7001012) {
						alert('服务器繁忙，请稍后重试')
					}else{
						alert('未知错误')
					}
				})
				.catch(error => {
					console.log(error);
				})
		},
		//登录
		login (){
			const qs = require('qs')
	    let param = qs.stringify({
	    'number': this.username,
			'password':this.formatPW
	    })
			if (this.username && this.password ) {
				axios.post(`${baseUrl}/api/v1.1/washCleanerMember/login`,param)
				.then(response => {
					this.username = '';
					this.password = '';
					if (response.data.code == 7001000) {
						localStorage.waterUserInfo = JSON.stringify(response.data.data);
						this.$router.push('/waterList');
					}else if(response.data.code === 7001011){
						alert('用户名或密码不能为空')
					}else if (response.data.code === 7001009) {
						alert('工号或者密码错误')
					}else if(response.data.code === 7001012){
						alert('服务器繁忙，请稍后重试')
					}else if(response.data.code === 7001031){
						alert('您处于离职状态，请联系管理员')
					}else{
						alert('未知错误')
					}
				})
				.catch(function(error){
					console.log(error);
				})
			}else {
				alert("请填写完整工号或者密码")
			}
		},
		testPassword (){
			let reg = /^[a-zA-Z0-9]{6,18}$/;
					if(reg.test(this.password)){

					}else {
						alert("密码应为6-18位的数字或字母")
						this.password = ""
					}
		}
	}
}
</script>
<style  lang="stylus" scoped>
.background
	position: absolute;
	height: 100%
	width: 100%
	display: flex;
	flex-direction: column;
	justify-content:center;
	background: #20d9bb
	h1
		z-index: 4
		text-align: center;
		font-size: .8rem
		color: #fff;
		background-color : #fff;
		text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;
		-webkit-background-clip : text;
	.login
		position: relative;
		margin: 0 auto;
		top: -.32rem
		left: 0
		width: 4.64rem
		height: 5rem
		overflow: hidden;
		text-align: center
		border-radius: 2%
		background: rgba(255,255,255,0.3)
		.connent
			margin-top: .8rem
			.username,.password
				padding: .2rem .1rem
				color: #666
				display: block;
				.input
					width:3.2rem
					height: .5rem
					border-bottom: 1px solid #888
					background: white
					margin-left: .2rem
					-webkit-appearance:none
					line-height: normal;
					outline:none;
					border-radius: 0
					background: transparent;
				.input:focus
					border-bottom: 1px solid #fff
				.input::-webkit-input-placeholder
					color: #888
					padding-left: .1rem
			.tip
				color: #ccc
				font-size: .2rem
				margin: .1rem auto;
			.button
				-webkit-appearance: none
				width: 2.14rem
				height: .6rem
				background: #66cc66
				color:white
				font-size: 20px
				border-radius: .2rem
				margin-top: .2rem
</style>
